@charset  "utf-8";
@import "reset";
$font-size:40;

@function r($px){
    @return $px/$font-size*1rem;
}


html,body,.web{
    width:100%;
    height: 100%;
}

.swiper-container{
    width: 100%;
    height: 100%;
}
.page{
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 50px;
}
.page1{
    background: url('../img/demobg.png')no-repeat;
    background-size: 100%;
    position: relative;
    .bgbottom{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: r(376);
        img{
            width: 100%;
            height: 100%;
        }
    }
    
    
    .bgcontent{
        width: 90%;
        height: 100%;
        margin: 0 auto;
        border-left: r(1) dashed white;
        border-right: r(1) dashed white;
        position: relative;
    }
    
    .feiji{
        width: r(54);
        height: r(43);
        position: absolute;
        top: r(300);
        left: r(80);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .feiji2{
        width: r(72);
        height: r(25);
        position: absolute;
        top: r(330);
        right: r(100);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .bgcontent-left{
        width: r(31);
        height: r(416);
        position: absolute;
        top: r(320);
        left: r(-10);
        background-color:transparent ;
      img{
          width: 100%;
          height: 100%;
      }   
    }
    .bgcontent-right{
       width: r(20);
       height: r(116);
       position: absolute;
       top: r(60);
       right: r(-10);
       .icon_img{
        width: r(20);
        height: r(24);
        margin-top: r(5);
        img{
            width: 100%;
            height: 100%;
        }
       }
    }
    
    .qing{
        width: r(89);
        height: r(89);
        position: absolute;
        top: 0;
        left: r(220);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .chun{
         width: r(77);
        height: r(89);
        position: absolute;
        top: r(89);
       left: r(220);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .ji{
          width: r(84);
        height: r(89);
        position: absolute;
        top: r(178);
       left: r(220);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .nian{
          width: r(77);
        height: r(89);
        position: absolute;
        top: r(267);
       left: r(220);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .ce{
          width: r(94);
        height: r(89);
        position: absolute;
        top: r(356);
        left: r(220);
     
        img{
            width: 100%;
            height: 100%;
        }
    }
    .jieshao{
        width: r(331);
        height: r(78);
        position: absolute;
        top: r(445);
        left: r(120);
        img{
            width: 100%;
            height: 100%;
        }
        
    }
    .audeo_icon{
        width: 10%; 
        height: r(58);
        position: absolute;
        right: r(10);
        top: r(5);
        transform-origin: center;
          animation: audeoicon  linear infinite;
            -webkit-animation: audeoicon  linear infinite;
        @keyframes audeoicon{
            0%{transform: rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
            100%{transform: rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
        }
         @-webkit-keyframes audeoicon{
            0%{transform: rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
            100%{transform: rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
        }
        img{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
           
        }
    }
}
.page2{
    background: url('../img/demobg.png')no-repeat;
    background-size: 100%;
     
     
      .bgcontent{
        width: 90%;
        height: 100%;
        margin: 0 auto;
        border-left: r(1) dashed white;
        border-right: r(1) dashed white;
        position: relative;
    }
     .bgcontent-left{
        width: r(31);
        height: r(416);
        position: absolute;
        top: r(320);
        left: r(-10);
        background-color:transparent ;
      img{
          width: 100%;
          height: 100%;
      }   
    }
    .bgcontent-right{
       width: r(20);
       height: r(116);
       position: absolute;
       top: r(60);
       right: r(-10);
       .icon_img{
        width: r(20);
        height: r(24);
        margin-top: r(5);
        img{
            width: 100%;
            height: 100%;
        }
       }
    }
    
    .bggua1{
        width: r(427);
        height: r(293);
        background: url('../img/bggua.png')no-repeat;
        background-size:100% ;
        position: absolute;
        top: r(50);
        left: r(80);
        
        .bgguaimg1{
            width: r(96);
            height: r(91);
            position: absolute;
            top: r(68);
            left: r(30);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .bgguaimg2{
            width: r(96);
            height: r(91);
            position: absolute;
            top: r(114);
            left: r(168);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .bgguaimg3{
            width: r(96);
            height: r(91);
            position: absolute;
            top: r(68);
            left: r(300);
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .bggua2{
        width: r(427);
        height: r(293);
         background: url('../img/bggua.png')no-repeat;
        background-size:100% ;
        position: absolute;
        top: r(350);
        left: r(80);
         .bgguaimg4{
            width: r(96);
            height: r(91);
            position: absolute;
            top: r(68);
            left: r(30);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .bgguaimg5{
            width: r(96);
            height: r(91);
            position: absolute;
            top: r(114);
            left: r(168);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .bgguaimg6{
            width: r(96);
            height: r(91);
            position: absolute;
            top: r(68);
            left: r(300);
            img{
                width: 100%;
                height: 100%;
            }
        }
        
    }
    
    #guamsg{
        display: inline-block;
         width: r(467);
       position: absolute;
       top: r(650);
        left: r(60);
        text-align: left;
        font-size: r(24);
        line-height: r(40);
    }
    
    .icon_feiji{
        width: r(176);
        height: r(131);
        position: absolute;
        bottom: r(20);
        right: 0;
        opacity: 0;
        animation: feiji 2.2s linear 7.4s forwards;
        -webkit-animation: feiji 2.2s linear 7.4s forwards;
        @keyframes feiji{
            0%{transform: translateX(r(-200));-webkit-transform: translateX(r(-200));opacity: 0.2;}
            10%{transform: translateX(r(-150));-webkit-transform: translateX(r(-150));opacity: 0.3;}
            20%{transform: translateX(r(-100));-webkit-transform: translateX(r(-100));opacity: 0.4;}
            30%{transform: translateX(r(-50));-webkit-transform: translateX(r(-50));opacity: 0.5;}
            40%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
            60%{transform: scale(1.2);-webkit-transform: scale(1.2);opacity: 0.5;}
            100%{transform: scale(1);-webkit-transform: scale(1);opacity: 1;}
            
        }
        @-webkit-keyframes feiji{
           0%{transform: translateX(r(-200));-webkit-transform: translateX(r(-200));opacity: 0.2;}
            10%{transform: translateX(r(-150));-webkit-transform: translateX(r(-150));opacity: 0.3;}
            20%{transform: translateX(r(-100));-webkit-transform: translateX(r(-100));opacity: 0.4;}
            30%{transform: translateX(r(-50));-webkit-transform: translateX(r(-50));opacity: 0.5;}
            40%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
            60%{transform: scale(1.2);-webkit-transform: scale(1.2);opacity: 0.5;}
            100%{transform: scale(1);-webkit-transform: scale(1);opacity: 1;}
            
        }
        img{
            width: 100%;
            height: 100%;
        }
    }
    
     .audeo_icon{
        width: 10%; 
        height: r(58);
        position: absolute;
        right: r(10);
        top: r(5);
        transform-origin: center;
          animation: audeoicon  linear infinite;
            -webkit-animation: audeoicon  linear infinite;
        @keyframes audeoicon{
            0%{transform: rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
            100%{transform: rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
        }
         @-webkit-keyframes audeoicon{
            0%{transform: rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
            100%{transform: rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
        }
        img{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
           
        }
    }
}
.page3{
   background: url('../img/demobg.png')no-repeat;
    background-size: 100%;
     
      .bgcontent{
        width: 90%;
        height: 100%;
        margin: 0 auto;
        border-left: r(1) dashed white;
        border-right: r(1) dashed white;
        position: relative;
    }
     .bgcontent-left{
        width: r(31);
        height: r(416);
        position: absolute;
        top: r(320);
        left: r(-10);
        background-color:transparent ;
      img{
          width: 100%;
          height: 100%;
      }   
    }
    .bgcontent-right{
       width: r(20);
       height: r(116);
       position: absolute;
       top: r(60);
       right: r(-10);
       .icon_img{
        width: r(20);
        height: r(24);
        margin-top: r(5);
        img{
            width: 100%;
            height: 100%;
        }
       }
    }
    
      .bgtank{
          width: r(473);
          height: r(389);
          background: url('../img/bgtank.png')no-repeat;
          background-size:100% ;
          position: absolute;
          top: r(100);
          left: r(50); 
          opacity: 0;
          animation: flip 2.2s ease-in-out 1.4s forwards;
          -webkit-animation: flip 2.2s ease-in-out 1.4s forwards;
          
          @-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 0.4;
    }
    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 0.4;
    }
    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0.4;
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0.4;
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 0.4;
    }
    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 0.4;
    }
    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0.4;
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        -ms-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0.4;
    }
    100% {
        -webkit-transform: perspective(400px);
        -ms-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 1;
    }
}

          .tank{
              width: r(380);
              height: r(290);
              position: absolute;
              top: r(59);
              left: r(60);
              
              img{
                  width: 100%;
                  height: 100%;
              }
          }
          
      }
      
      .qiqiu{
          width: r(132);
          height: r(95);
          position: absolute;
          top: r(50);
          left: r(30);
          opacity: 0;
            animation: qiqiu 2s linear 3.6s infinite;  
            -webkit-animation: qiqiu 2s linear 3.6s infinite;  
            @keyframes qiqiu{
                0%{transform: translateY(r(0));-webkit-transform: translateY(r(0));opacity: 1;}
                60%{transform: translateY(60);-webkit-transform: translateY(r(60));opacity: 1;}
                100%{transform: translateY(0);-webkit-transform: translateY(r(0));opacity: 1;}
            }  
            @-webkit-keyframes qiqiu{
                0%{transform: translateY(r(0));-webkit-transform: translateY(r(0));opacity: 1;}
                60%{transform: translateY(60);-webkit-transform: translateY(r(60));opacity: 1;}
                100%{transform: translateY(0);-webkit-transform: translateY(r(0));opacity: 1;}
            }  
          img{
              width: 100%;
              height: 100%;
          }
      }
       #lvxing{
        display: inline-block;
        width: r(467);
       position: absolute;
       top: r(550);
        left: r(60);
        text-align: left;
        font-size: r(24);
        line-height: r(40);
        color: white;
        letter-spacing: r(4);
    }
    
    .lvxingimg1{
        width: r(161);
        height: r(200);
        position: absolute;
        bottom: 0;
        left: r(20);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .lvxingimg2{
        width: r(161);
        height: r(200);
        position: absolute;
        bottom: 0;
        left: r(211);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .lvxingimg3{
        width: r(161);
        height: r(200);
        position: absolute;
        bottom: 0;
        left: r(402);
        img{
            width: 100%;
            height: 100%;
        }
    }
   .audeo_icon{
        width: 10%; 
        height: r(58);
        position: absolute;
        right: r(10);
        top: r(5);
        transform-origin: center;
          animation: audeoicon  linear infinite;
            -webkit-animation: audeoicon  linear infinite;
        @keyframes audeoicon{
            0%{transform: rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
            100%{transform: rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
        }
         @-webkit-keyframes audeoicon{
            0%{transform: rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
            100%{transform: rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
        }
        img{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
           
        }
    }
}



.page4{
   background: url('../img/demobg.png')no-repeat;
    background-size: 100%;
     
      .bgcontent{
        width: 90%;
        height: 100%;
        margin: 0 auto;
        border-left: r(1) dashed white;
        border-right: r(1) dashed white;
        position: relative;
    }
     .bgcontent-left{
        width: r(31);
        height: r(416);
        position: absolute;
        top: r(320);
        left: r(-10);
        background-color:transparent ;
      img{
          width: 100%;
          height: 100%;
      }   
    }
    .bgcontent-right{
       width: r(20);
       height: r(116);
       position: absolute;
       top: r(60);
       right: r(-10);
       .icon_img{
        width: r(20);
        height: r(24);
        margin-top: r(5);
        img{
            width: 100%;
            height: 100%;
        }
       }
    }
    
     .travelimg1{
        width: r(230);
        height: r(270);
        position: absolute;
        top: r(100);
        left: r(30);
        opacity: 0;
        animation: hhh1 0.6s ease-in-out 1s forwards;
        -webkit-animation: hhh1 0.6s ease-in-out 1s forwards;
        
        @keyframes hhh1{
            0%{transform: translateX(r(200));-webkit-transform: translateX(r(200));opacity: 0.2;}
           
            100%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
        }
         @-webkit-keyframes hhh1{
            0%{transform: translateX(r(200));-webkit-transform: translateX(r(200));opacity: 0.2;}
          
            100%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
        }
        img{
            width: 100%;
            height: 100%;
        }
    }
    .travelimg2{
        width: r(254);
        height: r(216);
        position: absolute;
        top: r(400);
        left: r(30);
         opacity: 0;
        animation: hhh2 0.6s ease-in-out 2s forwards;
        -webkit-animation: hhh2 0.6s ease-in-out 2s forwards;
        
        @keyframes hhh2{
            0%{transform: translateX(r(200));-webkit-transform: translateX(r(200));opacity: 0.2;}
           
            100%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
        }
         @-webkit-keyframes hhh2{
            0%{transform: translateX(r(200));-webkit-transform: translateX(r(200));opacity: 0.2;}
          
            100%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
        }
        img{
            width: 100%;
            height: 100%;
        }
    }
     .travelimg3{
         width: r(254);
        height: r(216);
        position: absolute;
        top: r(646);
        left: r(30);
         opacity: 0;
        animation: hhh3 0.6s ease-in-out 2.8s forwards;
        -webkit-animation: hhh3 0.6s ease-in-out 2.8s forwards;
        
        @keyframes hhh3{
            0%{transform: translateX(r(200));-webkit-transform: translateX(r(200));opacity: 0.2;}
           
            100%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
        }
         @-webkit-keyframes hhh3{
            0%{transform: translateX(r(200));-webkit-transform: translateX(r(200));opacity: 0.2;}
          
            100%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
        }
        img{
            width: 100%;
            height: 100%;
        }
    }
    
    .travelimg4{
        width: r(210);
        height: r(212);
         position: absolute;
        top: r(100);
        right: r(30);
         opacity: 0;
        animation: hhh4 0.6s ease-in-out 1.6s forwards;
        -webkit-animation: hhh4 0.6s ease-in-out 1.6s forwards;
        
        @keyframes hhh4{
            0%{transform: translateX(r(-200));-webkit-transform: translateX(r(-200));opacity: 0.2;}
           
            100%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
        }
         @-webkit-keyframes hhh4{
            0%{transform: translateX(r(-200));-webkit-transform: translateX(r(-200));opacity: 0.2;}
          
            100%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
        }
        img{
            width: 100%;
            height: 100%;
        }
    }
     .travelimg5{
         width: r(210);
        height: r(212);
         position: absolute;
        top: r(340);
        right: r(30);
        opacity: 0;
        animation: hhh5 0.6s ease-in-out 2.4s forwards;
        -webkit-animation: hhh5 0.6s ease-in-out 2.4s forwards;
        
        @keyframes hhh5{
            0%{transform: translateX(r(-200));-webkit-transform: translateX(r(-200));opacity: 0.2;}
           
            100%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
        }
         @-webkit-keyframes hhh5{
            0%{transform: translateX(r(-200));-webkit-transform: translateX(r(-200));opacity: 0.2;}
          
            100%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
        }
        img{
            width: 100%;
            height: 100%;
        }
    }
     .travelimg6{
         width: r(210);
         height: r(212);
         position: absolute;
        top: r(580);
        right: r(30);
        opacity: 0;
        animation: hhh6 0.6s ease-in-out 3s forwards;
        -webkit-animation: hhh6 0.6s ease-in-out 3s forwards;
        
        @keyframes hhh6{
            0%{transform: translateX(r(-200));-webkit-transform: translateX(r(-200));opacity: 0.2;}
           
            100%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
        }
         @-webkit-keyframes hhh6{
            0%{transform: translateX(r(-200));-webkit-transform: translateX(r(-200));opacity: 0.2;}
          
            100%{transform: translateX(r(0));-webkit-transform: translateX(r(0));opacity: 1;}
        }
        img{
            width: 100%;
            height: 100%;
        }
    }
    .travelimg7{
        width: r(206);
        height: r(149);
        position: absolute;
        bottom: r(20);
        right: r(30);
        
        
        img{
            width: 100%;
            height: 100%;
        }
    }
     .audeo_icon{
        width: 10%; 
        height: r(58);
        position: absolute;
        right: r(10);
        top: r(5);
        transform-origin: center;
          animation: audeoicon  linear infinite;
            -webkit-animation: audeoicon  linear infinite;
        @keyframes audeoicon{
            0%{transform: rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
            100%{transform: rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
        }
         @-webkit-keyframes audeoicon{
            0%{transform: rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
            100%{transform: rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
        }
        img{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
           
        }
    }
    
}


.page5{
   background: url('../img/demobg.png')no-repeat;
    background-size: 100%;
     
      .bgcontent{
        width: 90%;
        height: 100%;
        margin: 0 auto;
        border-left: r(1) dashed white;
        border-right: r(1) dashed white;
        position: relative;
    }
     .bgcontent-left{
        width: r(31);
        height: r(416);
        position: absolute;
        top: r(320);
        left: r(-10);
        background-color:transparent ;
      img{
          width: 100%;
          height: 100%;
      }   
    }
    .bgcontent-right{
       width: r(20);
       height: r(116);
       position: absolute;
       top: r(60);
       right: r(-10);
       .icon_img{
        width: r(20);
        height: r(24);
        margin-top: r(5);
        img{
            width: 100%;
            height: 100%;
        }
       }
    }
    
     #zhendimsg{
        display: inline-block;
        width: r(467);
       position: absolute;
       top: r(100);
        left: r(40);
        text-align: left;
        font-size: r(24);
        line-height: r(40);
        color: white;
        letter-spacing: r(4);
    }
    .zhendiimg1{
        width:r(210) ;
        height: r(212);
        position: absolute;
        top: r(200);
        left: r(60);
        img{
            width: 100%;
            height: 100%;
        }
    }
   .zhendiimg2{
       width: r(230);
       height: r(270);
       position: absolute;
       top: r(200);
       right: r(30);
       img{
           width: 100%;
           height: 100%;
       }
   }
   .zhendiimg3{
       width: r(494);
       height: r(383);
       position: absolute;
       top: r(500);
       right: r(30);
       img{
           width: 100%;
           height: 100%;
       }
   }
   .zhendiimg4{
       width: r(119);
       height: r(95);
        position: absolute;
       top: r(450);
       left: r(30);
       img{
           width: 100%;
           height: 100%;
       }
   }
    
     .audeo_icon{
        width: 10%; 
        height: r(58);
        position: absolute;
        right: r(10);
        top: r(5);
        transform-origin: center;
          animation: audeoicon  linear infinite;
            -webkit-animation: audeoicon  linear infinite;
        @keyframes audeoicon{
            0%{transform: rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
            100%{transform: rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
        }
         @-webkit-keyframes audeoicon{
            0%{transform: rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
            100%{transform: rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
        }
        img{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
           
        }
    }
    
    
}